---
title: "样式展示"
description: "展示文档系统中各种 Markdown 元素的样式效果"
---

# 样式展示

这个页面展示了文档系统中各种 Markdown 元素的样式效果。

## 标题样式

### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

## 文本样式

这是一个普通段落。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

**这是粗体文本**，*这是斜体文本*，还有 `内联代码`。

## 链接

这是一个 [链接示例](https://example.com)，点击可以跳转到外部网站。

## 列表

### 无序列表
- 第一项
- 第二项
  - 嵌套项目 1
  - 嵌套项目 2
- 第三项

### 有序列表
1. 第一步
2. 第二步
   1. 子步骤 A
   2. 子步骤 B
3. 第三步

## 代码块

### JavaScript 代码
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to our docs, ${name}`;
}

const user = "Developer";
greet(user);
```

### TypeScript 代码
```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

const createUser = (userData: Partial<User>): User => {
  return {
    id: Math.random(),
    name: userData.name || "Anonymous",
    email: userData.email || "user@example.com"
  };
};
```

### CSS 代码
```css
.prose {
  color: var(--foreground);
  max-width: none;
  line-height: 1.7;
}

.prose h1 {
  font-size: 2.25rem;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
```

## 引用

> 这是一个引用块。它可以用来突出显示重要的信息或者引用其他来源的内容。
> 
> 引用块可以包含多个段落，并且会有特殊的样式来区分普通文本。

## 表格

| 功能 | 描述 | 状态 |
|------|------|------|
| Markdown 支持 | 完整的 Markdown 语法支持 | ✅ 完成 |
| 代码高亮 | 语法高亮显示 | ✅ 完成 |
| 响应式设计 | 适配各种屏幕尺寸 | ✅ 完成 |
| 暗色主题 | 支持暗色模式 | 🚧 进行中 |

## 分隔线

---

## 注意事项

这些样式都是响应式的，会根据屏幕尺寸自动调整。同时支持明暗两种主题模式。

### 代码示例

下面是一个简单的 React 组件示例：

```jsx
import React from 'react';

const WelcomeMessage = ({ name }) => {
  return (
    <div className="welcome-container">
      <h2>欢迎，{name}！</h2>
      <p>感谢您使用我们的文档系统。</p>
    </div>
  );
};

export default WelcomeMessage;
```

这个组件展示了如何在文档中嵌入代码示例，并且代码会有语法高亮显示。